<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>K线图</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:500px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

        
// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
// 数据格式是：
// [    ['2013/1/24', 2320.26,2320.26,2287.3,2362.94],     ['2013/1/25', 2300,2291.3,2288.26,2308.38] ]

var data0 = splitData([['2015-05-11',16.98,17.27,16.79,17.31,17.27],
['2015-05-12',17.25,17.24,17.04,17.4,17.24],
['2015-05-13',17.33,17.07,16.9,17.39,17.07],
['2015-05-14',17.1,16.99,16.94,17.25,16.99],
['2015-05-15',16.91,16.78,16.59,17.07,16.78],
['2015-05-18',16.62,16.38,16.34,16.76,16.38],
['2015-05-19',16.37,17.04,16.35,17.09,17.04],
['2015-05-20',17.04,17.15,16.97,17.49,17.15],
['2015-05-21',17.25,17.32,17.1,17.4,17.32],
['2015-05-22',17.46,17.76,17.34,17.79,17.76],
['2015-05-25',17.85,18.14,17.84,18.18,18.14],
['2015-05-26',18.22,18.39,17.91,18.45,18.39],
['2015-05-27',18.44,18.07,18.05,18.65,18.07],
['2015-05-28',18.1,17.04,17.01,18.14,17.04],
['2015-05-29',17.08,17.04,16.71,17.35,17.04],
['2015-06-01',17.04,17.93,16.86,18.08,17.93],
['2015-06-02',17.93,17.84,17.5,17.97,17.84],
['2015-06-03',17.89,17.9,17.54,18.05,17.9],
['2015-06-04',18.0,18.63,17.58,18.8,18.63],
['2015-06-05',19.0,18.43,18.02,19.17,18.43],
['2015-06-17',18.49,18.2,17.95,18.98,18.2],
['2015-06-18',18.09,17.72,17.64,18.25,17.72],
['2015-06-19',17.58,17.07,16.84,17.95,17.07],
['2015-06-23',16.45,17.02,16.24,17.09,17.02],
['2015-06-24',17.03,17.25,16.58,17.3,17.25],
['2015-06-25',17.6,16.71,16.65,17.74,16.71],
['2015-06-26',16.43,15.85,15.33,17.08,15.85],
['2015-06-29',16.3,15.91,14.81,16.53,15.91],
['2015-06-30',15.93,16.96,15.91,16.98,16.96],
['2015-07-01',16.81,16.32,16.2,16.93,16.32],
['2015-07-02',16.5,16.37,15.81,16.83,16.37],
['2015-07-03',16.39,15.87,15.1,16.64,15.87],
['2015-07-06',17.4,17.22,16.63,17.46,17.22],
['2015-07-07',16.94,17.57,16.46,17.82,17.57],
['2015-07-08',16.2,15.95,15.81,17.5,15.95],
['2015-07-09',15.95,16.95,15.38,17.4,16.95],
['2015-07-10',16.76,17.28,16.65,18.15,17.28],
['2015-07-13',16.99,17.04,16.81,17.48,17.04],
['2015-07-14',16.78,16.75,16.36,16.98,16.75],
['2015-07-15',16.7,17.07,16.51,17.13,17.07],
['2015-07-16',17.07,16.96,16.71,17.12,16.96],
['2015-07-17',17.03,17.02,16.88,17.19,17.02],
['2015-07-20',17.0,16.68,16.65,17.03,16.68],
['2015-07-21',16.58,16.38,16.3,16.72,16.38],
['2015-07-22',16.33,16.16,16.15,16.38,16.16],
['2015-07-23',16.24,16.43,16.18,16.51,16.43],
['2015-07-24',16.43,16.14,16.13,16.49,16.14],
['2015-07-27',16.0,14.91,14.84,16.1,14.91],
['2015-07-28',14.68,15.24,14.62,15.4,15.24],
['2015-07-29',15.22,15.29,15.12,15.3,15.29],
['2015-07-30',15.29,14.9,14.88,15.36,14.9],
['2015-07-31',14.97,15.07,14.65,15.16,15.07],
['2015-08-03',14.99,15.55,14.86,15.6,15.55],
['2015-08-04',15.48,15.62,15.38,15.67,15.62],
['2015-08-05',15.6,15.31,15.27,15.64,15.31],
['2015-08-06',15.16,15.38,15.14,15.57,15.38],
['2015-08-07',15.58,15.47,15.39,15.64,15.47],
['2015-08-10',15.45,15.78,15.35,15.86,15.78],
['2015-08-11',15.7,15.57,15.51,15.75,15.57],
['2015-08-12',15.4,15.39,15.38,15.6,15.39],
['2015-08-13',15.47,15.45,15.29,15.56,15.45],
['2015-08-14',15.47,15.49,15.37,15.54,15.49],
['2015-08-17',15.41,15.32,15.22,15.41,15.32],
['2015-08-18',15.35,14.87,14.83,15.52,14.87],
['2015-08-19',14.87,15.0,14.5,15.17,15.0],
['2015-08-20',14.94,14.68,14.66,14.99,14.68],
['2015-08-21',14.61,14.22,14.2,14.74,14.22],
['2015-08-24',13.93,12.87,12.8,13.95,12.87],
['2015-08-25',12.54,12.39,11.91,13.08,12.39],
['2015-08-26',12.65,13.02,12.4,13.35,13.02],
['2015-08-27',13.16,13.98,12.98,14.09,13.98],
['2015-08-28',14.1,14.24,13.85,14.32,14.24],
['2015-08-31',14.2,14.96,13.96,14.98,14.96],
['2015-09-01',14.66,15.33,14.41,15.34,15.33],
['2015-09-02',14.9,14.89,14.72,15.37,14.89],
['2015-09-07',14.73,14.5,14.16,15.01,14.5],
['2015-09-08',14.52,15.06,14.22,15.16,15.06],
['2015-09-09',14.91,15.16,14.91,15.27,15.16],
['2015-09-10',15.06,15.25,14.96,15.27,15.25],
['2015-09-11',15.35,15.56,15.3,15.66,15.56],
['2015-09-14',15.5,15.93,14.93,15.95,15.93],
['2015-09-15',15.53,15.46,15.24,15.55,15.46],
['2015-09-16',15.31,15.43,15.03,15.8,15.43],
['2015-09-17',15.34,15.11,15.1,15.46,15.11],
['2015-09-18',15.16,15.03,15.02,15.29,15.03],
['2015-09-21',14.96,14.97,14.84,15.08,14.97],
['2015-09-22',14.97,15.05,14.97,15.23,15.05],
['2015-09-23',14.91,14.95,14.68,15.0,14.95],
['2015-09-24',14.95,15.27,14.87,15.3,15.27],
['2015-09-25',15.15,15.59,15.15,15.62,15.59],
['2015-09-28',15.55,15.92,15.42,15.96,15.92],
['2015-09-29',15.79,15.97,15.67,15.99,15.97],
['2015-09-30',15.95,16.63,15.9,16.65,16.63],
['2015-10-08',16.8,15.87,15.83,16.8,15.87],
['2015-10-09',15.97,15.9,15.85,16.15,15.9],
['2015-10-12',15.9,16.06,15.73,16.25,16.06],
['2015-10-13',15.98,15.97,15.85,16.11,15.97],
['2015-10-14',15.81,15.9,15.81,16.09,15.9],
['2015-10-26',16.03,16.28,16.03,16.57,16.28],
['2015-10-27',16.23,16.32,16.15,16.45,16.32]]);

// 数据意义：折线图的数据，即ema
// 数据格式： [2320,2291,2295,2346,2360,2383,2377,2425,2411,2432]
var data1 = [17.27,17.24,17.07,16.99,16.78,16.38,17.04,17.15,17.32,17.76,18.14,18.39,18.07,17.04,17.04,17.93,17.84,17.9,18.63,18.43,18.2,17.72,17.07,17.02,17.25,16.71,15.85,15.91,16.96,16.32,16.37,15.87,17.22,17.57,15.95,16.95,17.28,17.04,16.75,17.07,16.96,17.02,16.68,16.38,16.16,16.43,16.14,14.91,15.24,15.29,14.9,15.07,15.55,15.62,15.31,15.38,15.47,15.78,15.57,15.39,15.45,15.49,15.32,14.87,15.0,14.68,14.22,12.87,12.39,13.02,13.98,14.24,14.96,15.33,14.89,14.5,15.06,15.16,15.25,15.56,15.93,15.46,15.43,15.11,15.03,14.97,15.05,14.95,15.27,15.59,15.92,15.97,16.63,15.87,15.9,16.06,15.97,15.9,16.28,16.32];

// 切分数据，模板的写法
function splitData(rawData) {
    var categoryData = [];
    var values = []
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
    }
    return {
        categoryData: categoryData,
        values: values
    };
}


option = {
    title: {
        text: 'hehehehe',
        left: 0
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line'
        }
    },
    legend: {
        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
    },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        data: data0.categoryData,
        scale: true,
        boundaryGap : false,
        axisLine: {onZero: false},
        splitLine: {show: false},
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
    },
    yAxis: {
        scale: true,
        splitArea: {
            show: true
        }
    },
    dataZoom: [
        {
            type: 'inside',
            start: 50,
            end: 100
        },
        {
            show: true,
            type: 'slider',
            y: '90%',
            start: 50,
            end: 100
        }
    ],
    series: [
        {
            name: '日K',
            type: 'candlestick',
            data: data0.values,
            markPoint: {
                label: {
                    normal: {
                        formatter: function (param) {
                            return param != null ? Math.round(param.value) : '';
                        }
                    }
                },
                data: [
                    {
                        name: 'highest value',
                        type: 'max',
                        valueDim: 'highest'
                    },
                    {
                        name: 'lowest value',
                        type: 'min',
                        valueDim: 'lowest'
                    },
                    {
                        name: 'average value on close',
                        type: 'average',
                        valueDim: 'close'
                    }
                ]
            },
            
        },
        {
                name: 'MA5',
                type: 'line',
                smooth: true,
                data: data1,
                lineStyle: { normal: {opacity: 0.7} }
        }
        

    ]
};



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>